<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="../css/desk.css">
    <link rel="stylesheet" type="text/css" href="../css/sponsor_desk.css">
    <link rel="stylesheet" type="text/css" href="../css/exchange.css">
</head>
<body>
<div class="web is-master-first">
    <audio src="../media/bgm.mp3" autoplay loop></audio>
    <i class="iconfont music icon-music"></i>
    <i class="iconfont icon-shouye back-start"></i>

    <!----------首页 start---------->
    <div class="homepage">
        <div class="logo"><img src="../img/logo.png" alt="logo"></div>
        <h1>你办囍事</h1>
        <h1>我送囍酒</h1>
        <div class="text-btn" id="begin-diy">定制我的囍宴</div>
        <div class="text-btn" id="get-wine">我要免费领囍酒</div>

        <!----------弹窗 start---------->
        <div class="back hide" id="begin-pop">
            <div class="pop_box">
                <div class="pop_up popshow">
                    <p>定制专属囍宴</p>
                    <p>邀请宾客入席</p>
                    <p>抢999元现金贺礼</p>
                    <button class="btn" id="see-rule">查看活动规则</button>
                    <span class="close iconfont icon-cancel"></span>
                </div>
            </div>
        </div>
        <!----------弹窗 end---------->
    </div>
    <!----------首页 end---------->

    <!----------定制喜宴 start---------->
    <div class="diy-desk-box">
        <!----------活动规则 start---------->
        <div class="rule">
            <div class="rule-text">
                <div class="title">活动规则</div>
                <p>在活动期间内，参与H5互动，制作自己的囍宴，并分享至朋友圈，邀请更多好友“入座”。6位好友入座即可组成一桌酒席，累计组成酒席最多的前99位用户，将获得999元的现金贺礼。此外，符合参与条件的用户凭结婚证以及酒店婚宴预订单据，可获赠限量婚宴定制囍酒套装一份，线下领取，先到先得。</p>

                <div class="title">参与条件</div>
                <p>于2016年1月1日后进行婚姻登记，并在2016年10月1日—10月7日举办婚宴的新人（限广东省、海南省区域）</p>

                <div class="title">活动时间</div>
                <p>2016年9月8日-9月26日</p>

                <div class="title">奖品设置</div>
                <p>1、第1名至99名，各获得￥999现金贺礼一份；</p>
                <p>2、符合参与条件的用户凭结婚证以及酒店婚宴预订单据，前往张裕白兰地线下兑换点（限广东省、海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止。</p>

                <div class="title">活动说明</div>
                <p>1、活动奖品有限，在参与者提交认证资料正确无误的前提下，将按照时间顺序的原则确定获奖名单；</p>
                <p>2、2016年9月30日将在张裕白兰地官方微信、微博平台以及囍宴排行榜公布中奖名单及领奖方式；</p>
                <p>3、一个微信ID号只能参与一次；</p>
                <p>4、如对本活动规则有任何疑问，活动主办方将会在法律允许的范围内对本活动规则给予必要的说明和解释。</p>
            </div>
            <div class="text-btn" id="start-diy">马上办囍宴</div>
        </div>
        <!----------活动规则 end---------->

        <div class="diy-box">
            <h4 class="host"><em>小李</em>家的囍宴</h4>
            <div class="box clearfix">
                <!--主宾桌-->
                <div class="wrapper-big">
                    <div class="center"><span>主宾桌</span></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                </div>
                <!--第一桌-->
                <div class="wrapper zoom-in">
                    <div class="center"><span>第<em>1</em>席</span></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                </div>
                <!--添加-->
                <div class="wrapper wrapper-add">
                    <div class="center"><i class="iconfont icon-jia1"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                    <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                </div>
            </div>
            <!--按钮-->
            <div class="word">
                <div id="create" class="text-btn">生成囍宴,分享囍事</div>
            </div>
            <!-----------弹窗---------------->
            <div id="word-pop" class="back hide">
                <div class="pop_box">
                    <div class="pop_up">
                        <p>囍宴摆好了,</p>
                        <p>快邀请亲朋好友入席!</p>
                        <span class="close iconfont icon-cancel"></span>
                        <a href="desk.html" class="btn" style="font-size:1rem;margin:1rem auto 0;display:block;width:5rem">确定</a>
                    </div>
                </div>
            </div>
            <!-----------弹窗2---------------->
            <div id="dissatisfy-pop" class="back hide">
                <div class="pop_box">
                    <div class="pop_up">
                        <p>当前席位坐满后才能添加哦</p>
                        <span class="close iconfont icon-cancel"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!----------定制喜宴 end---------->

    <!----------领喜酒 start---------->
    <div class="get-wine-box">
        <!----------领取规则 start---------->
        <div class="get-wine">
            <div id="cuted" class="clearfix">
                <i class="iconfont icon-shuaxin"></i>
                <span id="pro_gd">广东</span>
                <span id="pro_hn">海南</span>
            </div>
            <div class="map">
                <div class="guangdong">
                    <img src="../img/guangdong.png" alt="guangdong">
                    <div class="shaoguan">
                        <p>已领取</p>
                        <div class="text"><em class="already">10</em>份</div>
                    </div>
                    <div class="maoming">
                        <p>已领取</p>
                        <div class="text"><em class="already">23</em>份</div>
                    </div>
                    <div class="yangjiang">
                        <p>已领取</p>
                        <div class="text"><em class="already">56</em>份</div>
                    </div>
                </div>
                <div class="hainan">
                    <img src="../img/hainan.png" alt="hainan">
                    <div class="haikou">
                        <p>已领取</p>
                        <div class="text"><em class="already">10</em>份</div>
                    </div>
                    <div class="sanya">
                        <p>已领取</p>
                        <div class="text"><em class="already">23</em>份</div>
                    </div>
                </div>
            </div>
            <div class="stay-get">
                <div class="text">剩余<em id="suit-count">9998</em>套</div>
                <div class="headline">婚宴定制囍酒套装</div>
                <div class="text">待领取</div>
            </div>
            <div class="title">领取方式：</div>
            <p>符合领取条件的用户凭结婚证以及酒店婚宴预订单据，前往张裕白兰地线下兑换点（限广东省、海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止。</p>
            <div class="title">领取时间：</div>
            <p>2016年9月9日—10月29日</p>
            <div class="title">领取条件：</div>
            <p>于2016年1月1日后进行婚姻登记，并在2016年9月9日—10月29日举办婚宴的新人（限广东省、海南省区域）</p>
            <div class="text-btn" id="find-lately">找到离我最近的领取点</div>
        </div>
        <!----------领取规则 end---------->

        <!----------找到最近 start---------->
        <div class="lately-map">
            <div class="content">
                <div id="map">
                    <p class="no-wang">loading...</p>
                </div>
                <p>赶紧前往张裕白兰地线下兑换点</p>
                <p>领取婚宴定制囍酒套装限量好礼！</p>
            </div>
            <div class="back hide" id="location-pop">
                <div class="pop_box">
                    <div class="pop_up pop_Show">
                        <p>定位失败</p>
                        <p>请检查网络或定位</p>
                        <span class="close iconfont icon-cancel"></span>
                    </div>
                </div>
            </div>
        </div>
        <!----------找到最近 end---------->

        <div class="exchange-box">
            <div class="exchange_info">
                <div class="exchange">
                    请输入兑换码
                </div>

                <div class="put_text">
                    <input id="put" class="text_Put put_wh" type="text">
                </div>

                <div class="below text-btn" id="sure-exchange">
                    确认
                </div>
            </div>

            <div class="back hide" id="exchange-pop">
                <div class="pop_box">
                    <div class="pop_up pop_Show">
                        <p>兑换成功</p>
                        <span class="close iconfont icon-cancel"></span>
                    </div>

                    <div class="pop_up pop_show">
                        <p>兑换失败</p>
                        <span class="close iconfont icon-cancel"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!----------领喜酒 end---------->
</div>
<script src="../js/jquery.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/common.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/index.js" type="text/javascript" charset="UTF-8"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=e7c4f8da06adb596308f9b0899779c36" type="text/javascript" charset="UTF-8"></script>
<script src="../js/map.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>